<template>
  <MainContent :bodyStyle="{}">
    <div class="knowledge-list">
      <div class="knowledge-list-category">
        <div class="knowledge-list-category-search">
          <el-input
            v-model="keywork"
            :prefix-icon="Search"
            clearable
            placeholder="搜索"
            @input="search"
          />
        </div>
        <div class="knowledge-list-category-list">
          <el-tree
            :data="data"
            :props="{
              children: 'children',
              label: 'label'
            }"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="knowledge-list-main">
        <div class="knowledge-list-main-tools">
          <div>
            <el-button type="primary" icon="Plus" plain>新增</el-button>
            <el-button type="danger" icon="Delete" plain>批量删除</el-button>
          </div>
          <el-input
            class="knowledge-list-main-tools-search"
            :prefix-icon="Search"
            clearable
            placeholder="搜索"
          />
        </div>

        <el-table :data="tableData" :border="true" :stripe="true">
          <el-table-column prop="name" label="名称">
            <template #default="scope">
              <div class="name">
                <DynamicIcon icon="Document" />
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="更新时间" width="180" />
          <el-table-column prop="createUser" label="创建者" width="130" />
          <el-table-column fixed="right" label="操作" width="150">
            <template #default>
              <el-button link type="primary" size="small">下载</el-button>
              <el-button link type="primary" size="small">编辑</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </MainContent>
</template>

<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

interface Tree {
  label: string
  children?: Tree[]
}

const keywork = ref('')

const data: Tree[] = [
  {
    label: '知识 1',
    children: [
      {
        label: '知识 1-1',
        children: [
          {
            label: '知识 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: '知识 2',
    children: [
      {
        label: '知识 2-1',
        children: [
          {
            label: '知识 2-1-1'
          }
        ]
      },
      {
        label: '知识 2-2',
        children: [
          {
            label: '知识 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: '知识 3',
    children: [
      {
        label: '知识 3-1',
        children: [
          {
            label: '知识 3-1-1'
          }
        ]
      },
      {
        label: '知识 3-2',
        children: [
          {
            label: '知识 3-2-1'
          }
        ]
      }
    ]
  }
]

const tableData = ref([
  {
    id: 'dfsdf',
    name: 'java从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'javascript从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'javascript从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'html从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'css从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'golang从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'python从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  },
  {
    id: 'fasdfasfsaf',
    name: 'c++从入门到放弃',
    createDate: '2023-06-23 19:37:56',
    createUser: '张三'
  }
])

const search = (val: string) => {
  const fn = useDebounceFn(() => {
    if ('' !== val) {
    } else {
    }
  }, 333)
  fn()
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}
</script>

<style lang="scss" scoped>
@import './KnowledgeDemo.scss';
</style>
